import React, { Component, PropTypes } from 'react';
import ClickToReview from './ClickToReview';

export default class ShowForm extends Component {
  constructor(props) {
    super(props);

    this.state = {
      firstName: '',
      lastName: '',
      contactNumber: '',
      email: '',
    };
  }

  render() {
    return (
      <div>
        <div>
          <span>First Name: </span>
          <span><strong>{this.props.data.firstName}</strong></span>
        </div>
        <div>
          <span>Last Name: </span>
          <span><strong>{this.props.data.lastName}</strong></span>
        </div>
        <div>
          <span>Contact number: </span>
          <ClickToReview text={this.props.data.contactNumber} />
        </div>
        <div>
          <span>Email: </span>
          <ClickToReview text={this.props.data.email} />
        </div>
        <div>
          <span>Blood type: </span>
          <span><strong>{this.props.data.bloodType}</strong></span>
        </div>
      </div>
    );
  }
}

ShowForm.propTypes = {
  data: PropTypes.shape({
    firstName: PropTypes.string.isRequired,
    lastName: PropTypes.string.isRequired,
    contactNumber: PropTypes.string.isRequired,
    email: PropTypes.string.isRequired,
    bloodType: PropTypes.string.isRequired,
  }),
};
